<template>
    <NCard class="tabs">
        <n-tabs type="bar" animated v-model:value="whichTab" @before-leave="handleBeforeLeave">
            <template #prefix>
                <NIcon size="20px">
                    <ChatbubblesOutline></ChatbubblesOutline>
                </NIcon>
                <span style="margin-right: 0.5rem;margin-left: 0.25rem;font-weight: 900;">知识问答</span>
            </template>
            <!-- tab-style="background-color:#fff" pane-style="background-color:#fff" pane-wrapper-style="background:#fff" -->
            <n-tab-pane name="all" tab="所有问答">
                <NGrid cols="1 500:12" :x-gap="24" :y-gap="24">
                    <NGridItem v-for="i in questionsList" offset="0 500:1" span="1 500:10">
                        <QAList @show-detail="handleShowDetail(i)" :data="i"></QAList>
                    </NGridItem>
                </NGrid>
            </n-tab-pane>
            <n-tab-pane name="my" tab="我的问答">
                <NGrid cols="1 500:12" :x-gap="24" :y-gap="24">
                    <NGridItem v-for="i in questionsList" offset="0 500:1" span="1 500:10">
                        <QAList @show-detail="handleShowDetail(i)" :data="i"></QAList>
                    </NGridItem>
                </NGrid>
            </n-tab-pane>
            <n-tab-pane name="post" tab="提问">
                <NGrid cols="1 500:12" :x-gap="24" :y-gap="24">
                    <NGridItem offset="0 500:1 900:2" span="1 500:10 900:8">
                        <AskAQuestion></AskAQuestion>
                    </NGridItem>
                </NGrid>
            </n-tab-pane>
        </n-tabs>
    </NCard>
    <n-modal v-model:show="showModal" class="modal">
        <QA :data="shownQuestion" @close="showModal = false" style="margin-top: 5%;margin-bottom: 5%;"></QA>
    </n-modal>
</template>

<script setup lang="ts">
import { NTabs, NTabPane, NCard, NIcon, NGrid, NGridItem, NModal } from "naive-ui";
import { ref, computed, watch } from "vue";
import { ChatbubblesOutline } from '@vicons/ionicons5'
import QAList from '@/components/Q&AList.vue'
import QA from '@/components/Q&A.vue'
import AskAQuestion from "@/components/AskAQuestion.vue";
import router from '@/router';
import qaUtils from "@/api/qa";

const tabs = ['all', 'my', 'post'];
const showModal = ref(false);

console.log(router.currentRoute.value.params.type);


const whichTab = ref(tabs.includes(String(router.currentRoute.value.params.type)) ? String(router.currentRoute.value.params.type) : 'all')


// const whichTab = computed(() => {
//     return tabs.includes(String(router.currentRoute.value.params.type)) ? String(router.currentRoute.value.params.type) : 'all';
// })

watch(router.currentRoute,
    (newVal, oldVal) => {
        whichTab.value = (newVal.params.type ? (newVal.params.type) as string : "") || "all";
        (() => {
            if (whichTab.value == "all") {
                return qaUtils.listQuestions;
            }
            if (whichTab.value == "my") {
                return qaUtils.listMyQuestions;
            }
            return () => {
                return new Promise<Array<{}>>((resolve, reject) => {
                    reject("?");
                })
            }
        })()().then((data) => {
            questionsList.value.length = 0;
            questionsList.value.push(...data);
        }).catch((error) => {
            console.log(error);
        })
    }, { immediate: true })


// if (whichTab.value == "all") {
//     qaUtils.listQuestions().then((data) => {
//         questionsList.value.length = 0;
//         questionsList.value.push(...data);
//     }).catch((error) => {
//         console.log(error);
//     });
// }
// if (whichTab.value == "my") {
//     qaUtils.listMyQuestions().then((data) => {
//         questionsList.value.length = 0;
//         questionsList.value.push(...data);
//     }).catch((error) => {
//         console.log(error);
//     });
// }
//     }, { immediate: true }
// )

const questionsList = ref([] as Array<{}>);

qaUtils.listQuestions().then((data) => {
    questionsList.value.length = 0;
    questionsList.value.push(...data);
}).catch((error) => {
    console.log(error);
});

function handleShowDetail(e: any) {
    window.$utils.message.success("功能实现")
    shownQuestion.value = e
    showModal.value = true;
}

function handleBeforeLeave(tabName: string) {
    router.push({ name: "qa", params: { type: tabName } })
    return true;
}



const shownQuestion = ref({})



</script>

<style scoped>
@media (max-width: 599px) {
    .tabs {
        width: calc(599px - 200px);
        max-width: 100%;
        margin: auto;
    }
}

/* 当视口宽度大于或等于600px时 */
@media (min-width: 600px) {
    .tabs {
        width: calc(100% - 200px);
        margin-left: 100px;
        margin-right: 100px;
    }
}

.tabs {
    margin-top: 1rem;
}


@media (max-width: 799px) {
    .modal {
        width: calc(799px - 400px);
        max-width: 100%;
        margin: auto;
    }
}

/* 当视口宽度大于或等于600px时 */
@media (min-width: 800px) {
    .modal {
        width: calc(100% - 400px);
        margin-left: 200px;
        margin-right: 200px;
    }
}

.modal {
    --useless-var: 114514px;
}
</style>